1 2 3 4 5 6 7 8 9 | <!DOCTYPE html>
<html>
<head>
<title>Carl Fredricksen's Profile</title>
</head>
<body>
Welcome to Carl Fredricksen's Profile page!
</body>
</html>
|
<X> <Y> ... </Y> </X><html>, which has two child tags: <head> and <body><title> is a child tag of <head><body> tag1 2 3 4 5 6 | <body>
Welcome to Carl Fredricksen's Profile page!
<img src='img/mugshot.jpg'>
Click <a href='http://pixar.wikia.com/wiki/Carl_Fredricksen'>here</a> to go to my wiki page.
</body>
|
name='value'<img> has no closing tag1 2 3 4 5 6 7 8 9 10 11 12 | <body>
<h1>Welcome to Carl Fredricksen's Profile page!</h1>
<p><img src='img/mugshot.jpg'></p>
<h3>Links</h3>
<p>Click <a href='http://pixar.wikia.com/wiki/Carl_Fredricksen'>here</a>
to go to my wiki page.
</p>
<h3>Hobbies</h3>
<p>I <strong>love</strong> travelling,
<em>especially</em> by balloons.
</p>
</body>
|
<h1> to <h5><p> is used to organize text into paragraphs<em> (emphasis) is for italics, <strong> is for bold1 2 3 4 5 6 7 8 9 10 11 | <table>
<tr> <td>Name</td> <td>Carl Fredricksen</td> </tr>
<tr> <td>Age</td> <td>78</td> </tr>
<tr> <td>Occupation</td> <td>Retiree</td> </tr>
<tr> <td>Email</td>
<td><a href='mailto:carl@paradisefalls.org'>
carl@paradisefalls.org
</a>
</td>
</tr>
</table>
|
1 2 3 4 5 6 7 8 9 10 | <h3>Friends</h3>
<ul>
<li>Russell</li>
<li>Dug</li>
<li>Kevin</li>
</ul>
<h3>Countries travelled</h3>
<ol>
<li>Venezuela</li>
</ol>
|
<ul> is unordered list - bullets are not numbered<ol> is ordered list - bullets are numbered<li> is list item, can be used in either <ol> or <ul>Use the following structure to keep things neat and allow for future expansion
my_profile_dir
|
|-- css
| |
| |-- main.css
|
|-- img
| |
| |-- mugshot.jpg
|
|-- index.html
1 2 3 4 | <head>
<title>Carl Fredricksen's Profile</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
|
<div> HTML tag1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body>
<div id='container'>
<div id='header'>
</div>
<div id='overview'>
</div>
<div id='mugshot'>
</div>
<div id='detail'>
</div>
<div id='footer'>
</div>
</div>
</body>
|
id attribute<div>s1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id='container'>
<div id='header'>
<h1>Welcome to Carl Fredricksen's Profile page</h1>
</div>
<div id='overview'>
<table>
<tr><td>Name</td> <td>Carl Fredricksen</td></tr>
<tr><td>Age </td> <td>78</td></tr>
<tr><td>Occupation</td> <td>Retiree</td></tr>
<tr><td>Email</td>
<td><a href='mailto:carl@paradisefalls.org'>
carl@paradisefalls.org</a></td>
</tr>
</table>
</div>
...
</div>
|
1 2 3 4 5 | body
{
color: #333333;
background-color: #a7a09a;
}
|
body is called the selector{...} contains properties and values being set#333333 and #a7a09a are RGB color codes00 to ff. Quiz: how many colors can RGB represent?body { ... }#header { ... }.someclass { ... }div#header { ... }div h1 { ... }#header h1, #header h2 { ... }Can you guess what each of selectors in the above examples do?
div#header { ... }<div id='header'> element is selecteddiv h1 { ... }<h1> elements that are inside any <div> element are selected#header h1, #footer h2 { ... }<h1> elements that are inside any HTML elements with id='header', plus all <h2> elements that are inside any HTML elements with id='footer' are selectedLet's give each <div> a different background color. This will help our eyes when we re-arrange them.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #header h1
{
font-family: 'Impact';
}
#overview
{
...
font-family: 'Helvetica';
font-size: 20pt;
}
#detail
{
...
font-family: 'Helvetica';
font-size: 16pt;
}
#footer
{
font-family: 'Courier New';
font-size: 12pt;
}
|
1 2 3 4 5 6 7 8 9 | #container
{
max-width: 750px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
background-color: #99c;
}
|
max-width auto for margin<div>s side-by-side1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #overview
{
float: left;
width: 550px;
}
#mugshot
{
float: right;
width: 200px;
}
#mugshot img
{
display: block; /* what does this line do??? ;-) */
max-width: 100%;
max-height: 100%;
}
|
float allows elements to be side by side, instead of one after another1 2 3 4 5 | #detail
{
...
clear: both;
}
|
clear: both;1 2 3 4 5 | div
{
padding-top: 0.1px;
padding-bottom: 0.1px;
}
|
Add paddings to make things look less crammed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #overview
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
#detail
{
padding: 5px 15px;
}
#footer
{
padding: 5px 15px;
}
|
Need to subtract left and right padding from width
1 2 3 4 5 6 7 8 | #overview
{
width: 520px; /* was 550px */
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | body
{
margin: 0;
}
#header h1
{
text-align: center;
}
td#fieldname
{
width: 40%;
}
#overview
{
background-color: #9cc;
}
|
| Table of contents | t |
|---|---|
| Exposé | ESC |
| Autoscale | e |
| Full screen slides | f |
| Presenter view | p |
| Source files | s |
| Slide numbers | n |
| Blank screen | b |
| Notes | 2 |
| Help | h |